<template>
    <div class="app-container">
      <el-row :gutter="20">
  <!--      历史数据-->
        <el-col :span="17" :xs="24" >
  <!--        <el-tabs type="border-card">-->
  <!--          <el-tab-pane label="1天">-->
              <div class="container" style="padding-top: 15px">
                <!--          搜索-->
                <Search
                    :search-data="searchData"
                    :search-params="queryParams"
                    @change="searchParamsUpdate"
                    @selectChange="selectChange"
                >
                </Search>
                <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
                <!--    表格-->
                <el-table
                    :data="tableData"
                    style="width: 100%;background: #002127;"
                    height="630px"
                    :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                    :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }"
                    >
                  <el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns[0].visible" />
                  <el-table-column prop="deviceId" label="设备ID" align="center" v-if="columns[1].visible" />
                  <el-table-column prop="channelName" label="通道名称" align="center" v-if="columns[2].visible" />
                  <el-table-column prop="value" label="通道值" align="center" v-if="columns[3].visible" />
                  <el-table-column prop="electricity" label="电量" align="center" v-if="columns[4].visible" />
                  <el-table-column prop="signal" label="信号" align="center" v-if="columns[5].visible" />
                  <el-table-column prop="voltage" label="电压" align="center" v-if="columns[6].visible" />
                  <el-table-column prop="time" label="上报数据时间" align="center" v-if="columns[7].visible" show-overflow-tooltip />
                  <el-table-column prop="realOld" label="实时/历史" align="center" v-if="columns[8].visible">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.realOld== 0" type="success">首次上传</el-tag>
                      <el-tag v-else-if="scope.row.realOld== 1">实时</el-tag>
                      <el-tag v-else-if="scope.row.realOld== 2" type="info">历史</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
                <!--    分页v-show="total>0"-->
                <pagination
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.limit"
                    @pagination="getList"
                />
              </div>
  <!--          </el-tab-pane>-->
  <!--          <el-tab-pane label="3天">配置管理</el-tab-pane>-->
  <!--          <el-tab-pane label="7天">角色管理</el-tab-pane>-->
  <!--          <el-tab-pane label="30天">定</el-tab-pane>-->
  <!--          <el-tab-pane label="90天">定</el-tab-pane>-->
  <!--        </el-tabs>-->
  
        </el-col>
  <!--      右侧-->
        <el-col :span="7" :xs="24" >
  <!--        曲线分析-->
          <el-row style="margin-bottom: 10px;border-radius: 10px;">
            <el-col :span="24" :xs="24">
              <div class="container">
                <div id="main" style="width: 100%;height:400px;"></div>
              </div>
            </el-col>
          </el-row>
  <!--        极值统计-->
          <el-row>
            <el-col :span="24" :xs="24">
              <div class="container" style="height: 400px;">
                <div style="line-height: 40px;font-size: 14px;font-weight:bold;height: 40px;color: #FFFFFF;">极值统计</div>
                <el-table
                    :data="tableDatas"
                    style="width: 100%;background: #0C323A;"
                    :cell-style="{backgroundColor: '#0C323A',color: '#ffffff',}"
                    :header-cell-style="{ backgroundColor: '#00484D',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }">
                  <el-table-column prop="time" label="时间"></el-table-column>
                  <el-table-column prop="max" label="最大值"></el-table-column>
                  <el-table-column prop="min" label="最小值"></el-table-column>
                  <el-table-column prop="average" label="平均值"></el-table-column>
                  <el-table-column prop="warn" label="告警次数"></el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </el-col>
  
      </el-row>
  
    </div>
  </template>
  
<script>
  import { getAllDevice, getChannelParameters, getHistoryRecord, curveAnalysisHistoryRecord, countPeakHistoryRecord  } from '@/api/dev/index'
  import Search from '@/components/PageSearch'
  import RightToolbar from '@/components/RightToolbar'
  import Pagination from "@/components/Pagination/index";
  
  export default {
    name: "DevHisManage",
    components: { Search, RightToolbar, Pagination },
    data() {
      return {
        // 搜索
        searchData: [
          // {
          //   type: 'input',
          //   label: '设备id',
          //   prop: 'deviceId',
          //   placeholder: '请输入设备id筛选'
          // },
          {
            type: 'select',
            label: '设备id',
            prop: 'deviceId',
            options: [],
            placeholder: '请选择设备筛选'
          },
          {
            type: 'select',
            label: '设备通道',
            prop: 'channel',
            options: [],
            placeholder: '请选择设备通道筛选'
          },
          {
            type: 'datetime',
            label: '开始时间',
            prop: 'startTime',
            placeholder: '请选择开始时间'
          },
          {
            type: 'datetime',
            label: '结束时间',
            prop: 'endTime',
            placeholder: '请选择结束时间'
          }
  
        ],
        // 总条数
        total: 0,
        // 查询参数2210187 2023-04-18 00:00:00 2023-04-19 23:00:00
        queryParams: {
          limit: 20,
          page: 1,
          channel: '',
          deviceId: '',
          startTime: '',
          endTime	: ''
        },
        id: '',
        channel: '',
        idName: '',
        channelName: '',
        ids: '',
        idNames: '',
        // 显示搜索条件
        showSearch: true,
        // 列信息
        columns: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `设备ID`, visible: true },
          { key: 2, label: `通道名称`, visible: true },
          { key: 3, label: `通道值`, visible: true },
          { key: 4, label: `电量`, visible: true },
          { key: 5, label: `信号`, visible: true },
          { key: 6, label: `电压`, visible: true },
          { key: 7, label: `上报数据时间`, visible: true },
          { key: 8, label: `实时/历史`, visible: true }
        ],
        // 表格
        tableData: [],
      //  极值统计表
        tableDatas: [],
        // 下拉搜索
        deviceOption: [],
        channelOption: []
      }
    },
    props: {},
    watch: {
      deviceOption: {
        handler(val) {
          this.searchData[0].options = this.deviceOption
        },
        immediate: true
      },
      channelOption: {
        handler(val) {
          this.searchData[1].options = this.channelOption
        },
        immediate: true
      }
    },
    created() {
      this.getDeviceOption()
      this.getList()
      this.queryParams.endTime = this.$moment(new Date(new Date())).format("YYYY-MM-DD HH:mm:ss")
      let yesterday = new Date(new Date().setDate(new Date().getDate() - 1))
      this.queryParams.startTime = this.$moment(yesterday).format("YYYY-MM-DD HH:mm:ss")
    },
    mounted() {
      this.chartA()
      console.log(this.$route.query.id,this.$route.query.idName,this.$route.query.channel,this.$route.query.channelName)
      //  首页携带的设备id和通道channelNo
      console.log(this.$route.query.Data,this.$route.query.Datas)
  
    },
    methods: {
      //设备下拉
      getDeviceOption() {
        this.id = this.$route.query.id  // 首页携带的设备id
        // this.idName = this.$route.query.idName
        this.channel = this.$route.query.channel;
        // this.channelName = this.$route.query.channelName;
        this.ids = this.$route.query.Data // 实时数据携带的设备id
        // this.idNames = this.$route.query.Datas
        const data = {
          limit: 500,
          page: 1
        }
        getAllDevice(data).then(res => {
          const data = res.data
          this.deviceOption = data.map(item => {
            return {
              value: item.deviceId,
              label: item.deviceName
            }
          });
          if(this.id) {
            this.selectChange()
            this.queryParams.deviceId = this.id;
            this.getChannelOption()
            this.queryParams.channel = this.channel
          }
          if(this.ids) {
            this.selectChange()
            this.queryParams.deviceId = this.ids;
            this.getChannelOption()
            // this.queryParams.channel = this.channelOption[0].value
          }
        }).catch(err => {
          console.log(err)
        })
      },
      // 通道下拉选择
      getChannelOption() {
        getChannelParameters(this.queryParams.deviceId).then(res => {
          const data = res.data
          this.channelOption = data.map(item => {
            return {
              value: item.channelNo,
              label: item.channelName
            }
          });
          this.channelOption.map(item => {
            if(this.channel==item.value) {
              this.queryParams.channel = item.value
              this.getCount()
            }
          })
          console.log(this.channelOption,'hfh')
        }).catch(err => {
          console.log(err)
        })
      },
      selectChange() {
        this.getChannelOption()
        this.getCount()
      },
      // 分页查询
      getList() {
        console.log(this.queryParams)
        getHistoryRecord(this.queryParams)
            .then((res) => {
              this.total = res.dataCounts
              this.tableData = res.data || []
            })
            .catch((err) => {
              console.log(err)
              // this.$message.error(err.errorMsg)
            })
      },
      // 新的搜索内容
      searchParamsUpdate(){
        this.getList()
        this.chartB()
      },
      //  曲线分析
      chartA() {
        const myChart = this.$echarts.init(document.getElementById('main'))  // 先获得这个dom元素并初始化
        // 指定图表的配置项和数据
        myChart.setOption({
          backgroundColor:'#002127',
          title: {
            text: '曲线分析',
            textStyle:{
              color: '#ffffff',
              fontSize: 14
            }
          },
          // 指示线
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: "#006675"
              }
            }
          },
          // 折线颜色
          color: ['#006675'],
          // 图表距离容器距离
          grid: {
            left: '2%',
            right: '2%',
            top: '13%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: [{
            show: true,
            type: 'category',
            // 隐藏横向网格线
            splitLine: {
              show: false
            },
            data: ['2001/04/05 00:00:00', '2002/04/05 00:00:00', '2003/04/05 00:00:00', '2004/04/05 00:00:00', '2005/04/05 00:00:00', '2006/04/05 00:00:00', '2007/04/05 00:00:00', '2008/04/05 00:00:00', '2009/04/05 00:00:00', '2010/04/05 00:00:00'],
            // x轴字体设置
            axisLabel: {
              // interval: 4, // 间隔
              rotate: 0, //倾斜角度
              color: '#ffffff',
            },
            // 横坐标刻度线
            axisTick: {
              show: false
            },
            // 坐标轴
            axisLine: {
              lineStyle: {
                color: '#999999',
              }
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          }],
          yAxis: [{
            type: 'value',
            // y轴字体设置
            axisLabel: {
              color: '#ffffff',
            },
            // 刻度线
            axisTick: {
              show: false
            },
            //y轴坐标线
            axisLine: {
              show:false
            },
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#999999',
                type:'dashed',
              }
            }
          }],
          series: [
            {
              name: '值',
              type: 'line',
              smooth: true,
              symbolSize: 4,
              data: ['40', '80', '50', '170', '70', '100', '80', '180', '40', '10'],
            },
            {
              name:'上限值',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              itemStyle: {
                color: '#ffc500',
                borderColor: "#fff",
                borderWidth: 1,
              },
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
            },
            {
              name:'下限值',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              itemStyle: {
                color: '#ff5b29',
                borderColor: "#fff",
                borderWidth: 1,
              },
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
          ]
        });
        myChart.resize();
      },
      chartB() {
        const myChart = this.$echarts.init(document.getElementById('main'))
        const data = {
          channel: this.queryParams.channel,
          deviceId: this.queryParams.deviceId,
          startTime: this.queryParams.startTime,
          endTime: this.queryParams.endTime
        }
        curveAnalysisHistoryRecord(data)
            .then((res) => {
              const up = res.data.up
              const down = res.data.down
              const value = res.data.value
              const time = res.data.time
              const names = res.data.channelName
              myChart.setOption({
                backgroundColor:'#002127',
                title: {
                  text: '曲线分析',
                  textStyle:{
                    color: '#ffffff',
                    fontSize: 14
                  }
                },
                // 指示线
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    lineStyle: {
                      color: "#006675"
                    }
                  }
                },
                // 折线颜色
                color: ['#006675'],
                // 图表距离容器距离
                grid: {
                  left: '2%',
                  right: '2%',
                  top: '13%',
                  bottom: '8%',
                  containLabel: true
                },
                xAxis: [{
                  show: true,
                  type: 'category',
                  // 隐藏横向网格线
                  splitLine: {
                    show: false
                  },
                  data: time,
                  // x轴字体设置
                  axisLabel: {
                    rotate: 0, //倾斜角度
                    color: '#ffffff',
                  },
                  // 横坐标刻度线
                  axisTick: {
                    show: false
                  },
                  // x坐标轴
                  axisLine: {
                    lineStyle: {
                      color: '#999999',
                    }
                  },
                  // y轴与坐标轴线对齐
                  boundaryGap: true,
                }],
                yAxis: [{
                  type: 'value',
                  // y轴字体设置
                  axisLabel: {
                    color: '#ffffff',
                  },
                  // y轴线条
                  axisLine: {
                    show: false
                  },
                  // 刻度线
                  axisTick: {
                    show: false
                  },
                  // 网格线
                  splitLine: {
                    show: true,
                    lineStyle: {
                      color: '#999999',
                    }
                  }
                }],
                series: [
                  {
                    name: names,
                    type: 'line',
                    smooth: true,
                    symbolSize: 4,
                    data: value,
                  },
                  {
                    name:'上限值',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                      color: '#ffc500',
                      borderColor: "#fff",
                      borderWidth: 1,
                    },
                    data: up
                  },
                  {
                    name:'下限值',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 4,
                    itemStyle: {
                      color: '#ff5b29',
                      borderColor: "#fff",
                      borderWidth: 1,
                    },
                    data: down
                  }
                ]
              });
              myChart.resize();
            })
            .catch((err) => {
              console.log(err)
              // this.$message.error(err.errorMsg)
            })
      },
      //  极值统计
      getCount() {
        const data = {
          channel: this.queryParams.channel,
          deviceId: this.queryParams.deviceId,
          time: ''
        }
        countPeakHistoryRecord(data)
            .then((res) => {
              this.tableDatas = res.data || []
            })
            .catch((err) => {
              console.log(err)
              // this.$message.error(err.errorMsg)
            })
      },
    }
  }
  </script>
  
  <style lang='less' scoped>
  .app-container {
    width: 100%;
    min-height: 100%;
    // padding: 15px;
    box-sizing: border-box;
    background: #0C323A;
    .container {
      width: 100%;
      background: #002127;
      border-radius: 10px;
      overflow: hidden;
    }
    // 面板左对齐
    ::v-deep .el-tabs__nav-scroll {
      justify-content: flex-start;
    }
    //// 面板内容距离标题
    //::v-deep .el-tab-pane {
    //  margin-top: 15px;
    //}
  }
  // 表格设置鼠标经过时背景颜色
  ::v-deep.el-table tbody tr:hover>td{
    background-color: #02565c !important;
  }
  //表格改变每行底边框颜色
  ::v-deep.el-table  td, .el-table th.is-leaf  {
    border-bottom:  1px solid rgba(0,231,231,0.302)!important;
  }
  /*table边框颜色*/
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: #002127;
  }
  
  </style>
  